<template>
	<view class="bbs">
		<view class="tests">
			<u-swiper height="324upx" imgMode="scaleToFill" :list="list3" indicator indicatorMode="dot" circular
				style="border-radius: 15upx;width: 100%;margin: 0 auto;" @click="jump()"></u-swiper>
		</view>
		<view class="lists" v-for="(item,index) in tests" style="">
			<!-- {{item.stringList}} -->
			<view :class="item.title.length >= 19 ? 'titles' : 'titles2'" @click="newvideo(item)">
				{{item.title}}
			</view>
			<view class="express" v-if="item.description.length <= 62" @click="newvideo(item)">
				<text>{{item.description}}</text>
			</view>

			<view class="express" v-if="item.description.length > 62">
				<view class="info">
					<view :class="{hide:!item.iSinfo}" @click="showinfo(index)">{{item.description}}</view>
					<view class="tips" v-if="!item.iSinfo">
						<u-icon @click="showinfo(index)" name="arrow-down" size="14" color="#fc6758" label="全文"
							labelPos="left" labelColor="#fc6758" labelSize="14"></u-icon>
					</view>
				</view>
				<view class="tips hidebtn" @click="showinfo(index)" v-if="item.iSinfo">
					<u-icon name="arrow-up" size="14" color="#fc6758" label="收起" labelPos="left" labelColor="#fc6758"
						labelSize="14"></u-icon>
				</view>
			</view>
			<!-- <u-album bigimg="1" :urls='item.images' v-if="item.images.length > 1"  multipleSize="110" space="3" @albumWidth="width => albumWidth = width" ></u-album> -->
			<view style="max-height: 450upx;overflow: hidden;">
				<image @click="newvideo(item)" mode="widthFix"
					v-if="item.coverUrl != null || item.stringList.length == null || item.stringList.length == ''"
					:src="item.coverUrl" class="images">
				</image>
				<image @click="newvideo(item)" mode="widthFix"
					v-if=" item.coverUrl == null && item.stringList.length == 1" :src="item.stringList[0]"
					class="images">
				</image>
				<!-- <image  v-else :src=item.stringList[0] mode="" class="images"></image> -->
				<!-- 		<video  @click="newvideo(item)"  mode="widthFix" v-if="item.coverUrl != null || item.stringList.length == null || item.stringList.length == ''" :src="item.videoUrl" class="images" >
				</video>
				<video  @click="newvideo(item)" mode="widthFix" v-if=" item.coverUrl == null && item.stringList.length == 1" :src="item.videoUrl" class="images" >
				</video> -->
				<u-album @click="newvideo(item)" :previewFullImage='true' space="10" style="width: 100%;margin: 0 auto;"
					v-if="item.coverUrl == null && item.stringList.length > 1" :urls="item.stringList" keyName="src2"
					maxCount='3' :showMore='false' multipleSize='100' bigimg='0'>
				</u-album>
			</view>

			<view class="bottom" @click="newvideo(item)">
				<view class="bottomleft">{{item.gmtCreate |times}}</view>
				<view class="bottomcenter"></view>
				<view class="bottomright"></view>
			</view>
			<!-- <view class="biglist" >
				<view v-for="(item,index) in commentlist" class="lists2">					
						<text class="name" >{{item.nickName}}:</text>
						<view >{{item.commentContent}}</view>
				</view>
			</view> -->
		</view>

		<u-overlay class="zbg" :show="showbigimg" @click="showbigimg = false" :opacity="1.0">
			<image class="bigimg" :src="bigimg" mode="widthFix"></image>
		</u-overlay>
		<!-- 		<u-scroll-list style="padding-left: calc(2.5% + 10upx);">
		        <view class="videos" v-for="(item,index) in leslists"  >
		        	<image class="videoimg" :src=item.image mode="" style="" @click="newvideo()"></image>
		        	<view class="videotext" style="" @click="newvideo()">
		        		{{item.title}}
		        	</view>
		        	<view class="videopeople">
		        		<view class="heads">
		        			<image :src='item.head' mode="" class="headsimg"></image>
		        		</view>
		        		<view class="names" >{{item.name}}</view>
		        		<u-icon class="ic" v-if="item.zan == 0" name="thumb-up" size="24" @click="zan(item)"></u-icon>
		        		<u-icon class="ic" v-if="item.zan == 1" name="thumb-up-fill" size="24" color="#FFB22F" @click="zan(item)"></u-icon>

						<view class="nums" v-if="item.zans < 10000" >{{item.zans}}</view>
						<view class="nums" v-if="item.zans >= 10000" >{{Number(item.zans/10000).toFixed(0)}}w+</view>
		        	</view>
		        </view>
		</u-scroll-list> -->



		<!-- 		<view class="lists" v-for="(item,index) in tests" v-if="index >= 2" style="" @click="newvideo()">
			<view :class="item.title.length >= 16 ? 'titles' : 'titles2'">
				{{item.title}}
			</view>
			<u-album bigimg="1" :urls='item.images' v-if="item.images.length > 1"  multipleSize="110" space="3" @albumWidth="width => albumWidth = width" ></u-album>
			<image :src="item.images[0]" v-if="item.images.length == 1" mode="" class="images"></image>
		</view> -->

	</view>
</template>

<script>
	let timer = null
	import {
		circlelist,
		zan,
		nzan,
		imgs
	} from '@/api/community'
	export default {
		props: {
			searchs1: String,
			required: true
		},
		data() {
			return {
				albumWidth: 95,
				showbigimg: false,
				bigimg: null,
				iSinfo: false,
				leslists: [],
				circles: {
					pageSize: 4,
					pageNum: 1,
					type: 1,
					title: null,
				},
				albumWidth: 0,
				list3: [],
				urls1: [],
				urls2: [],
				tests: []
			}
		},
		filters: {
			times(value) {
				let date = new Date(value);
				let y = date.getFullYear(); // 年
				let MM = date.getMonth() + 1; // 月
				MM = MM < 10 ? ('0' + MM) : MM;
				let d = date.getDate(); // 日
				d = d < 10 ? ('0' + d) : d;
				let h = date.getHours(); // 时
				h = h < 10 ? ('0' + h) : h;
				let m = date.getMinutes(); // 分
				m = m < 10 ? ('0' + m) : m;
				let s = date.getSeconds(); // 秒
				s = s < 10 ? ('0' + s) : s;
				// var timer =  y + '-' + MM + '-' + d + ' ' + h + ':' + m + ':' + s;
				var timer = y + '-' + MM + '-' + d;
				return timer;
			}
		},
		created() {},
		mounted() {
			this.circles.title = this.searchs1;
			this.circlelist();
			this.imgs();
		},
		onReachBottom() {
			console.log("00000000")
			//阻止重复加载
			if (timer !== null) {
				clearTimeout(timer)
			}
			this.lessons.pageNum++;
			timer = setTimeout(() => this.circlelist(), 500)
			console.log("00000000")
			// this.getMoreNews()
		},
		methods: {
			newphoto(item) {
				this.bigimg = item;
				this.showbigimg = true;
			},
			// 全文展开收起
			showinfo(index) {
				this.tests[index].iSinfo = !this.tests[index].iSinfo
			},
			imgs() {
				imgs(1).then(res => {
					if (res.success == 1) {
						// this.list3 = res.data
						for (let sss in res.data) {
							this.list3.push(res.data[sss].picturesLinking)
						}
						console.log(this.list3)
					} else {

					}
				})
			},
			circlelist() {
				circlelist(this.circles).then(res => {
					if (res.data.records.length != 0) {
						for (let sss in res.data.records) {
							let test = res.data.records[sss];
							test.iSinfo = false;
							this.tests.push(test)
						}
						console.log(this.tests)
						this.circles.pageNum++;
					} else {
						// this.circles.pageNum--;
						uni.showToast({
							title: '无更多内容',
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			newvideo(item) {
				console.log("000000000")
				if (item.typeVideo == 1) {
					uni.navigateTo({
						url: '/pages/community/content?id=' + item.id,
					});
				} else if (item.typeVideo == 0) {
					uni.navigateTo({
						url: '/pages/community/video/video?id=' + item.id + '&type=2',
					});
				}
			},
			zan(item) {
				if (item.zan == 0) {
					item.zan = 1;
					item.zans++;
				} else {
					item.zan = 0;
					item.zans--;
				}
			},
			jump() {
				console.log("00000")
				uni.navigateTo({
					url: '/pages/mine/vip',
				});
			}

		}
	}
</script>

<style>
	page {
		/* background-color: #eee; */
	}
</style>
<style scoped lang="scss">
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		background-color: transparent;
	}

	.tests {
		// height:;
		padding-bottom: 20upx;

		// background-image: url(../../static/tabsIcon/shequbg.jpg);
	}

	.lists {
		width: 100%;
		// margin: 10upx auto;
		padding: 0 20upx;
		// height: 400upx;
		background-color: #FFFFFF;
		margin-bottom: 20upx;
		border-bottom: 1upx solid #e1e1e1;
		border-radius: 20upx;
	}

	.titles {
		width: 95%;
		max-height: 130upx;
		margin: 0 auto;
		padding-top: 30upx;
		font-size: 34upx;
		color: #333333;
	}

	.bbs {
		padding: 20upx;
		padding-bottom: 0;

		/deep/ .u-album {
			.u-album__row {
				flex-wrap: nowrap;
			}
		}
	}

	.titles2 {
		width: 95%;
		margin: 0 auto;
		max-height: 120upx;
		padding-top: 20upx;
		// line-height: 120upx;
		// color: rgb(87, 107, 149);
		// font-size: 42upx;
		// background-color: #5AC725;
		font-size: 34upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		opacity: 1;
	}

	.images {
		width: 100%;

	}

	.videos {
		display: flex;
		float: left;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: flex-start;
		width: 100%;
		height: 700upx;
		margin: 2%;
		background-color: #FFFFFF;
		border-radius: 40upx;
		// overflow: hidden;
	}

	.videoimg {
		// position: relative;
		height: 500rpx;
		width: 300upx;
		border-radius: 40upx 40upx 0 0;
		// background-color: #1467FF;
	}

	.videotext {
		position: relative;
		height: 110rpx;
		width: 90%;
		margin: 0 auto;
		// overflow: hidden;
		// /*超出部分隐藏*/
		// white-space: nowrap;
		// /*不换行*/
		// text-overflow: ellipsis;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 32rpx;
		line-height: 60rpx;
		font-size: 28upx;
	}

	.videopeople {
		position: relative;
		display: flex;
		height: 90upx;
		width: 100%;
	}

	.heads {
		text-align: center;
		width: 23%;
		line-height: 90upx;

		// background-color: #1467FF;
	}

	.headsimg {
		top: 15upx;
		width: 60upx;
		height: 60upx;
		border-radius: 999rem;
	}

	.names {
		width: 40%;
		// background-color: #5AC725;
		font-size: 20upx;
		line-height: 90upx;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
	}

	.ic {
		width: 12%;
		margin-right: 0;
		right: 0;
		// background-color: #1467FF;
	}

	.nums {
		width: 24%;
		font-size: 24upx;
		line-height: 90upx;
		text-align: center;
		// background-color: #BEF5C8;
		overflow: hidden;
		/*超出部分隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
	}

	.bottom {
		height: 80upx;

		.bottomleft {
			width: 80%;
			font-size: 28upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 82upx;
			color: #999999;
		}

		.bottomenter {
			width: 10%;
		}

		.bottomright {
			width: 10%;
		}
	}


	// 展开收起
	.express {
		display: flex;
		width: 95%;
		flex-direction: column;
		background-color: #fff;
		// padding: 20rpx 20upx;
		margin: 20upx auto;
		font-size: 30upx;
		color: #9a9a9a;
		position: relative;

		.info {
			display: flex;
			flex-direction: column;

			.tips {
				width: 140rpx;
				height: 40rpx;
				display: flex;
				justify-content: flex-end;
				align-items: center;
				background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 50%);

				position: absolute;
				bottom: 0rpx;
				right: 0rpx;
			}
		}

	}

	// 收起 按钮
	.hidebtn {
		display: flex;
		flex: 1;
		justify-content: flex-end;
		color: #fc6758;
		font-size: 28rpx;
	}

	// 展开 文字
	.hide {
		word-break: break-word; //换行模式
		overflow: hidden;
		text-overflow: ellipsis; //修剪文字，超过2行显示省略号
		display: -webkit-box;
		-webkit-line-clamp: 3; //此处为上限行数
		-webkit-box-orient: vertical;
	}

	.zbg {
		background-color: #333333;
		display: flex;
		flex-direction: row;
		align-items: center;

		.bigimg {
			width: 100%;
			// margin-top: 50%;
		}
	}

	.lists2 {
		display: flex;
		justify-content: flex-start;
		width: 100%;
		margin: 0upx auto;
		padding: 10upx;
		border-top: 1upx solid #F7F7F7;
		background-color: #f7f7f7;
		// border-radius: 20upx;
		border-bottom: 4upx solid #FFFFFF;

		.name {
			text-align: left;
		}
	}
</style>
